<template>
    <view class="shopping-cart-page">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

        <!-- 标题栏 -->
        <view class="header">
            <text class="header-title">购物车</text>
        </view>

        <!-- 购物车内容 -->
        <view class="cart-content" v-if="cartList.length > 0">
            <!-- 按店铺分组显示 -->
            <view class="store-group" v-for="(store, storeIndex) in groupedCartList" :key="storeIndex">
                <!-- 商品列表 -->
                <view class="product-list">
                    <view class="product-item" v-for="(item, itemIndex) in store.products" :key="item.id || itemIndex">
                        <!-- 选择复选框 -->
                        <view class="checkbox-wrapper" @click="toggleSelect(item, storeIndex, itemIndex)">
                            <view class="checkbox" :class="{ 'checked': item.selected }">
                                <uni-icons v-if="item.selected" type="checkmarkempty" size="16"
                                    color="#ffffff"></uni-icons>
                            </view>
                        </view>

                        <!-- 商品图片 -->
                        <image class="product-image" :src="item.img" mode="aspectFill" @click="goToProductDetail(item)">
                        </image>

                        <!-- 商品信息 -->
                        <view class="product-info">
                            <view class="product-title">
                                <view class="product-name" @click="goToProductDetail(item)">{{ item.title || item.name
                                    }}
                                </view>
                                <view class="product-spec" v-if="item.norm || item.spec">{{ item.norm || item.spec }}
                                </view>
                            </view>
                            <view class="price-quantity-row">
                                <text class="product-price">¥{{ item.price }}</text>
                                <view class="quantity-selector">
                                    <view class="quantity-btn"
                                        :class="{ 'disabled': (item.num || item.quantity || 0) <= 1 }"
                                        @click="decreaseQuantity(item, storeIndex, itemIndex)">
                                        <uni-icons type="minus" size="25" color="#333"></uni-icons>
                                    </view>
                                    <view class="quantity-value">{{ item.num || item.quantity || 0 }}</view>
                                    <view class="quantity-btn" @click="increaseQuantity(item, storeIndex, itemIndex)">
                                        <uni-icons type="plus" size="25" color="#333"></uni-icons>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 空购物车 -->
        <view class="empty-cart" v-else>
            <text class="empty-text">购物车空空如也~</text>
        </view>

        <!-- 为您推荐 -->
        <view class="recommend-section">
            <view class="recommend-divider">
                <view class="divider-line"></view>
                <text class="divider-text">为您推荐</text>
                <view class="divider-line"></view>
            </view>

            <!-- 推荐商品列表（瀑布流布局） -->
            <view class="waterfall-container" v-if="recommendList.length > 0">
                <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                    <view class="product-item-waterfall" v-for="(item, index) in column" :key="index"
                        @click="goToRecommendProductDetail(item)">
                        <image :src="item.img" mode="widthFix"></image>
                        <view class="product-info-waterfall">
                            <view class="product-title">{{ item.title }}</view>
                            <view class="product-synopsis">{{ item.synopsis }}</view>
                            <view class="product-price">
                                <text class="price">¥{{ item.price }}</text>
                                <text class="original-price" v-if="item.original_price">¥{{ item.original_price
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 添加空标签撑起高度 -->
            <view style="height: 50px;"></view>
            <!-- 无数据提示 -->
            <view v-if="recommendList.length === 0" class="no-data">
                <text>暂无推荐商品</text>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-action-bar" v-if="cartList.length > 0">
            <!-- 左侧：全选 -->
            <view class="select-all-section" @click="toggleSelectAll">
                <view class="select-all-section-left">
                    <view class="checkbox" :class="{ 'checked': isAllSelected }">
                        <uni-icons v-if="isAllSelected" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
                    </view>
                    <text class="select-all-text">全选</text>
                </view>
                <!-- 中间：合计价格 -->
                <view class="total-section">
                    <text class="total-label">合计:</text>
                    <text class="total-price">¥{{ totalPrice }}</text>
                </view>
            </view>
            <!-- 右侧：操作按钮 -->
            <view class="action-buttons">
                <view class="btn-checkout" @click="goToCheckout">
                    去结算 ({{ selectedCount }})
                </view>
                <view class="btn-delete" @click="showDeleteModal">
                    删除
                </view>
            </view>
        </view>

        <!-- 删除确认弹窗 -->
        <view class="delete-modal-mask" v-if="showDeleteDialog" @click="cancelDelete"></view>
        <view class="delete-modal" v-if="showDeleteDialog">
            <view class="delete-modal-content">
                <text class="delete-modal-text">确认将这{{ deleteCount }}个宝贝删除?</text>
                <view class="delete-modal-buttons">
                    <view class="delete-btn-cancel" @click="cancelDelete">我再想想</view>
                    <view class="delete-btn-confirm" @click="confirmDelete">删除</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { shoppingApi, productApi } from '@/api/indexAPI.js';
import { public_api, public_img } from '@/static/public.js';

export default {
    data() {
        return {
            statusBarHeight: 0,
            headerPaddingTop: 0,
            cartList: [], // 购物车列表
            groupedCartList: [], // 按店铺分组的购物车列表
            recommendList: [], // 推荐商品列表
            waterfallColumnCount: 2, // 瀑布流列数
            waterfallColumns: [[], []], // 瀑布流列数据
            showDeleteDialog: false, // 是否显示删除确认弹窗
            deleteCount: 0 // 要删除的商品数量
        };
    },
    computed: {
        // 是否全选
        isAllSelected() {
            if (this.cartList.length === 0) return false;
            return this.cartList.every(item => item.selected);
        },
        // 已选中的商品数量
        selectedCount() {
            return this.cartList.filter(item => item.selected).length;
        },
        // 合计价格
        totalPrice() {
            let total = 0;
            this.cartList.forEach(item => {
                if (item.selected) {
                    const price = parseFloat(item.price || 0);
                    const num = item.num || item.quantity || 1;
                    total += price * num;
                }
            });
            return total.toFixed(2);
        }
    },
    onLoad() {
        this.getStatusBarHeight();
        this.getHeaderPadding();
        this.loadCartList();
        this.loadRecommendList();
    },
    onShow() {
        // 记录当前TabBar页面（用于打卡页面返回时知道来源）
        uni.setStorageSync('currentTabBarPage', '/pages/shoppingCar/index');
        // 刷新购物车数据
        this.loadCartList();
    },
    methods: {
        // 获取状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                this.statusBarHeight = 20;
            }
        },

        // 获取标题栏padding
        getHeaderPadding() {
            try {
                // #ifdef MP-WEIXIN
                const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
                if (menuButtonInfo) {
                    this.headerPaddingTop = menuButtonInfo.bottom - this.statusBarHeight + 10;
                } else {
                    this.headerPaddingTop = 44 + 10;
                }
                // #endif

                // #ifndef MP-WEIXIN
                this.headerPaddingTop = 44 + 10;
                // #endif
            } catch (err) {
                console.error('获取标题栏padding失败', err);
                this.headerPaddingTop = 44 + 10;
            }
        },

        // 加载购物车列表
        async loadCartList() {
            try {
                this.loading = true;
                const response = await shoppingApi.getCartList();

                if (response && response.code === 1 && response.data) {
                    // 处理购物车数据
                    let cartData = response.data.list;
                    console.log('数据', cartData);

                    // 如果返回的是数组，直接使用
                    if (Array.isArray(cartData)) {
                        this.cartList = cartData.map(item => ({
                            ...item,
                            selected: item.selected || false,
                            img: item.img && item.img.startsWith('http')
                                ? item.img
                                : (public_api + (item.img || '')),
                            num: item.num || item.quantity || 1
                        }));
                    } else {
                        // 如果返回的是对象，可能需要处理
                        this.cartList = [];
                    }

                    // 按店铺分组
                    this.groupCartByStore();
                    // 获取每个商品的库存并合并
                    this.mergeProductsStock();
                } else {
                    console.warn('获取购物车数据失败:', response);
                    this.cartList = [];
                    this.groupedCartList = [];
                }
            } catch (error) {
                console.error('加载购物车数据失败:', error);
                this.cartList = [];
                this.groupedCartList = [];
            } finally {
                this.loading = false;
            }
        },
        // 调用商品详情接口，获取库存并合并到购物车项
        async mergeProductsStock() {
            try {
                const tasks = this.cartList
                    .filter(it => it.goods_id)
                    .map(async it => {
                        const goodsId = it.goods_id;
                        try {
                            const res = await productApi.getProductDetail(goodsId);
                            const stock = res?.data?.stock ?? res?.data?.store ?? res?.data?.inventory;
                            if (stock !== undefined) {
                                it.stock = Number(stock);
                            }
                        } catch (e) {
                            console.error('获取库存失败', goodsId, e);
                        }
                    });
                await Promise.all(tasks);
                // 更新分组里的引用
                this.groupCartByStore();
            } catch (e) {
                console.error('批量获取库存失败', e);
            }
        },

        // 按店铺分组购物车
        groupCartByStore() {
            const grouped = {};

            this.cartList.forEach(item => {
                // 获取店铺名称（可能从不同字段获取）
                const storeName = item.store_name || item.storeName || item.shop_name || '默认店铺';

                if (!grouped[storeName]) {
                    grouped[storeName] = {
                        storeName: storeName,
                        products: []
                    };
                }

                grouped[storeName].products.push(item);
            });

            // 转换为数组
            this.groupedCartList = Object.values(grouped);
        },

        // 切换商品选择状态
        toggleSelect(item, storeIndex, itemIndex) {
            item.selected = !item.selected;
            // 这里可以调用接口更新选择状态
            this.$forceUpdate();
        },

        // 减少数量
        decreaseQuantity(item, storeIndex, itemIndex) {
            const currentNum = item.num || item.quantity || 1;
            if (currentNum > 1) {
                // 保存原数量，用于失败时恢复
                if (!item.originalNum) {
                    item.originalNum = currentNum;
                }
                item.num = currentNum - 1;
                // 调用接口更新数量
                this.updateCartQuantity(item);
            } else {
                uni.showToast({
                    title: '数量不能少于1',
                    icon: 'none'
                });
            }
        },

        // 增加数量
        increaseQuantity(item, storeIndex, itemIndex) {
            const currentNum = item.num || item.quantity || 1;
            // 若有库存信息，限制最大数量
            if (typeof item.stock === 'number' && item.stock >= 0 && currentNum >= item.stock) {
                uni.showToast({ title: '库存不足', icon: 'none' });
                return;
            }
            // 保存原数量，用于失败时恢复
            if (!item.originalNum) {
                item.originalNum = currentNum;
            }
            item.num = currentNum + 1;
            // 调用接口更新数量
            this.updateCartQuantity(item);
        },

        // 更新购物车数量
        async updateCartQuantity(item) {
            try {
                // 获取购物车商品ID
                const cartId = item.id || item.cart_id || item.shopping_id;
                if (!cartId) {
                    console.error('购物车商品ID不存在');
                    return;
                }

                const num = item.num || item.quantity || 1;
                
                // 调用接口更新数量
                const response = await shoppingApi.updateCartQuantity(cartId, num);
                
                if (response && response.code === 1) {
                    // 更新成功，清除原数量标记
                    if (item.originalNum) {
                        delete item.originalNum;
                    }
                    console.log('更新购物车数量成功');
                } else {
                    // 更新失败，恢复原数量
                    const originalNum = item.originalNum || item.num || item.quantity || 1;
                    item.num = originalNum;
                    if (item.originalNum) {
                        delete item.originalNum;
                    }
                    this.$forceUpdate();
                    
                    uni.showToast({
                        title: response.msg || '更新数量失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('更新购物车数量失败:', error);
                // 恢复原数量
                const originalNum = item.originalNum || item.num || item.quantity || 1;
                item.num = originalNum;
                if (item.originalNum) {
                    delete item.originalNum;
                }
                this.$forceUpdate();
                
                uni.showToast({
                    title: '更新数量失败，请稍后重试',
                    icon: 'none'
                });
            }
        },

        // 跳转到商品详情
        goToProductDetail(item) {
            const productId = item.goods_id;
            if (productId) {
                uni.navigateTo({
                    url: `/pages/product/index?id=${productId}`
                });
            }
        },

        // 加载推荐商品列表
        loadRecommendList() {
            try {
                // 从本地存储获取 listAll 数据
                const listAll = uni.getStorageSync('listAll');

                if (listAll && Array.isArray(listAll) && listAll.length > 0) {
                    // 处理图片路径
                    this.recommendList = listAll.map(item => ({
                        ...item,
                        img: item.img && item.img.startsWith('http')
                            ? item.img
                            : (public_img + (item.img || ''))
                    }));

                    // 构建瀑布流数据
                    this.buildWaterfallData();
                } else {
                    console.log('没有推荐商品数据');
                    this.recommendList = [];
                    this.waterfallColumns = [[], []];
                }
            } catch (error) {
                console.error('加载推荐商品列表失败:', error);
                this.recommendList = [];
                this.waterfallColumns = [[], []];
            }
        },

        // 构建瀑布流数据
        buildWaterfallData() {
            // 初始化列数组
            const columns = Array.from({ length: this.waterfallColumnCount }, () => []);

            // 将商品列表按顺序分配到各列
            this.recommendList.forEach((item, index) => {
                const columnIndex = index % this.waterfallColumnCount;
                columns[columnIndex].push(item);
            });

            // 更新瀑布流列数据
            this.waterfallColumns = columns;
        },

        // 跳转到推荐商品详情
        goToRecommendProductDetail(item) {
            if (item && item.id) {
                uni.navigateTo({
                    url: `/pages/product/index?id=${item.id}`
                });
            }
        },

        // 全选/取消全选
        toggleSelectAll() {
            const selectAll = !this.isAllSelected;
            this.cartList.forEach(item => {
                item.selected = selectAll;
            });
            this.$forceUpdate();
        },

        // 去结算
        goToCheckout() {
            const selectedItems = this.cartList.filter(item => item.selected);
            if (selectedItems.length === 0) {
                uni.showToast({
                    title: '请选择要结算的商品',
                    icon: 'none'
                });
                return;
            }

            // 格式化选中的商品信息为shopping_ids数组（用于支付接口）
            // money 应该是单价，不是总价
            const shoppingIds = selectedItems.map(item => {
                const cartId = item.id || item.cart_id || item.shopping_id;
                const goodsId = item.goods_id || item.gid;
                const num = item.num || item.quantity || 1;
                const price = parseFloat(item.price || 0); // 单价

                return {
                    id: cartId,
                    goods_id: goodsId,
                    num: num,
                    money: price // money 是单价
                };
            });

            // 构建商品列表（用于显示，包含完整商品信息）
            const shoppingList = selectedItems.map(item => {
                const num = item.num || item.quantity || 1;
                const price = parseFloat(item.price || 0);

                return {
                    id: item.id || item.cart_id || item.shopping_id,
                    goods_id: item.goods_id || item.gid,
                    num: num,
                    price: price,
                    money: price * num,
                    title: item.title || item.name,
                    img: item.img,
                    norm: item.norm || item.spec,
                    spec: item.norm || item.spec
                };
            });

            // 计算总价（单价 * 数量）
            const totalPrice = shoppingIds.reduce((sum, item) => sum + (item.money * item.num), 0);

            // 跳转到支付页面，传递选中的商品信息
            uni.navigateTo({
                url: `/pages/pay/index?shoppingIds=${encodeURIComponent(JSON.stringify(shoppingIds))}&shoppingList=${encodeURIComponent(JSON.stringify(shoppingList))}&totalPrice=${totalPrice}&from=cart`
            });
        },

        // 显示删除确认弹窗
        showDeleteModal() {
            const selectedItems = this.cartList.filter(item => item.selected);
            if (selectedItems.length === 0) {
                uni.showToast({
                    title: '请选择要删除的商品',
                    icon: 'none'
                });
                return;
            }
            this.deleteCount = selectedItems.length;
            this.showDeleteDialog = true;
        },

        // 取消删除
        cancelDelete() {
            this.showDeleteDialog = false;
        },

        // 确认删除
        async confirmDelete() {
            this.showDeleteDialog = false;

            const selectedItems = this.cartList.filter(item => item.selected);
            if (selectedItems.length === 0) {
                return;
            }

            try {
                // 获取选中的购物车商品ID
                const selectedIds = selectedItems.map(item => {
                    return item.id || item.cart_id || item.shopping_id || item.goods_id || item.gid;
                }).filter(id => id); // 过滤掉空值

                if (selectedIds.length === 0) {
                    uni.showToast({
                        title: '商品ID不存在',
                        icon: 'none'
                    });
                    return;
                }

                // 显示加载提示
                uni.showLoading({
                    title: '删除中...',
                    mask: true
                });

                // 调用接口删除购物车商品
                const response = await shoppingApi.deleteCartItem(selectedIds);

                // 隐藏加载提示
                uni.hideLoading();

                if (response && response.code === 1) {
                    // 删除成功，从购物车列表中移除选中的商品
                    this.cartList = this.cartList.filter(item => {
                        const itemId = item.id || item.cart_id || item.shopping_id || item.goods_id || item.gid;
                        return !selectedIds.includes(itemId);
                    });
                    // 重新分组
                    this.groupCartByStore();
                    
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success'
                    });
                } else {
                    uni.showToast({
                        title: response.msg || '删除失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                // 隐藏加载提示
                uni.hideLoading();

                console.error('删除购物车商品失败:', error);
                uni.showToast({
                    title: '删除失败，请稍后重试',
                    icon: 'none'
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.shopping-cart-page {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: #ffffff;
}

/* 标题栏 */
.header {
    width: 100%;
    background-color: #ffffff;
    padding: 0 30rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
}

/* 购物车内容 */
.cart-content {
    margin-top: 10px;
}

/* 店铺分组 */
.store-group {
    margin-bottom: 20rpx;
    background-color: #ffffff;
}

.store-name {
    font-size: 14px;
    color: #858585;
    margin-left: 36px;
}

/* 商品列表 */
.product-list {
    padding: 0 30rpx;
}

.product-item {
    display: flex;
    padding: 5px 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
    border-bottom: none;
}

/* 复选框 */
.checkbox-wrapper {
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border: 2rpx solid #e0e0e0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox.checked {
    background-color: #ff8d1a;
    border-color: #ff8d1a;
}

/* 商品图片 */
.product-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
    background-color: #f5f5f5;
    flex-shrink: 0;
}

/* 商品信息 */
.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name {
    font-size: 15px;
    color: #505050;
    line-height: 1.4;
}

.product-spec {
    font-size: 13px;
    color: #b5b5b5;
}

.price-quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-price {
    font-size: 14px;
    color: #ff8b1a;
}

.quantity-selector {
    display: flex;
    align-items: center;
}

.quantity-btn {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #333;
}

.quantity-btn.disabled {
    border-color: #eee;
}

.quantity-btn.disabled .uni-icons {
    color: #ccc !important;
}

.quantity-value {
    margin: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    min-width: 40rpx;
    text-align: center;
}

/* 空购物车 */
.empty-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200rpx 0;
}

.empty-text {
    font-size: 28rpx;
    color: #999999;
}

/* 为您推荐区域 */
.recommend-section {
    margin-top: 40rpx;
}

.recommend-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
}

.divider-line {
    width: 60px;
    height: 0.5px;
    background-color: #646464;
}

.divider-text {
    font-weight: 350;
    margin: 0 20rpx;
    font-size: 28rpx;
    color: #646464;
}

/* 瀑布流布局 */
.waterfall-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
}

.waterfall-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-right: 15rpx;
}

.waterfall-column:last-child {
    margin-right: 0;
}

.product-item-waterfall {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
    padding: 5px;
}

.product-item-waterfall image {
    width: 100%;
    border-radius: 5.5px;
}

.product-info-waterfall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 14px;
    color: #505050;
    margin-bottom: 3px;
}

.product-synopsis {
    font-size: 13px;
    color: #8b8b8c;
    margin-bottom: 10px;
    flex: 1;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    display: flex;
    align-items: center;
}

.price {
    font-size: 14px;
    color: #ff4757;
    margin-right: 10rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

/* 无数据提示 */
.no-data {
    text-align: center;
    padding: 50rpx 0;
    color: #999;
    font-size: 28rpx;
}

/* 底部操作栏 */
.bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 30rpx;
    z-index: 999;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 全选区域 */
.select-all-section {
    display: flex;
    align-items: center;
    gap: 10rpx;
    width: 45%;
    justify-content: space-between;
}

.select-all-section-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.select-all-section .checkbox {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2rpx solid #e0e0e0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-all-section .checkbox.checked {
    background-color: #ff8d1a;
    border-color: #ff8d1a;
}

.select-all-text {
    font-size: 28rpx;
    color: #333333;
}

/* 合计区域 */
.total-section {
    display: flex;
    align-items: center;
}

.total-label {
    font-size: 14px;
    color: #383838;
    transform: scale(0.74);
}

.total-price {
    font-size: 14px;
    color: #ff8d1a;
    transform: scale(0.74);
}

/* 操作按钮区域 */
.action-buttons {
    display: flex;
}

.btn-checkout {
    width: 110px;
    height: 50px;
    background-color: #FD5700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #ffffff;
}

.btn-delete {
    width: 80px;
    height: 50px;
    background-color: #FD0000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #ffffff;
}

/* 删除确认弹窗 */
.delete-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.delete-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.delete-modal-content {
    width: 540rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx 40rpx;
    box-sizing: border-box;
}

.delete-modal-text {
    display: block;
    text-align: center;
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 60rpx;
    line-height: 1.5;
}

.delete-modal-buttons {
    display: flex;
    gap: 20rpx;
}

.delete-btn-cancel {
    flex: 1;
    height: 80rpx;
    background-color: #ffffff;
    border: 1rpx solid #e0e0e0;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666666;
}

.delete-btn-confirm {
    flex: 1;
    height: 80rpx;
    background-color: #ff8d1a;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #ffffff;
}
</style>
